<template>
  <div>

    <!-- 餐厅列表表格 -->
    <el-table :data="restaurantList" stripe style="width: 100%">
      <el-table-column prop="name" label="餐厅名称" width="150" />
      <el-table-column prop="area" label="位置" width="200" />
      <el-table-column prop="rating" label="星级" width="150">
        <template #default="scope">
          <el-rate v-model="scope.row.rating" disabled />
        </template>
      </el-table-column>

      <el-table-column prop="recommendedCount" label="推荐数" width="100" />
      <el-table-column prop="viewCount" label="浏览数" width="100" />
      <el-table-column prop="diningRecommendation" label="简介" width="200" show-overflow-tooltip="true" />

      <el-table-column label="操作" width="300" align="center">
        <template #default="scope">
          <el-button size="mini" @click="openEditDialog(scope.row)" type="primary">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteRestaurants(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination v-model:current-page="pagination.page" :page-size="pagination.size" :total="pagination.totalRecords"
      layout="total, prev, pager, next, sizes" @current-change="handlePageChange" @size-change="handleSizeChange"
      style="text-align: right; margin-top: 20px;" />

    <!-- 修改餐厅信息的对话框 -->
    <el-dialog v-model="isEditDialogVisible" title="修改用户信息" width="400px">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="餐厅名称" prop="name">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="位置" prop="area">
          <el-input v-model="editForm.area" />
        </el-form-item>
        <el-form-item label="推荐数" prop="recommendedCount">
          <el-input-number v-model="editForm.recommendedCount" :min="0" />
        </el-form-item>
        <el-form-item label="浏览数" prop="viewCount">
          <el-input-number v-model="editForm.viewCount" :min="1" />
        </el-form-item>
        <el-form-item label="简介" prop="diningRecommendation">
          <el-input type="textarea" v-model="editForm.diningRecommendation" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';

const restaurantList = ref([]);
const isEditDialogVisible = ref(false);

// 分页信息
const pagination = reactive({
  page: 1,
  size: 10,
  totalRecords: 0,
});

// 餐厅编辑表单
const editForm = reactive({
  id: 0,
  name: '',
  area: '',
  rating: 0,
  recommendedCount: 0,
  viewCount: 1,
  diningRecommendation: '',
  coverImageUrl: '',
});


// 获取餐厅列表
const queryRestaurants = async () => {
  try {
    const response = await axios.get('/api/restaurants/search', {
      params: { pageNum: pagination.page, pageSize: pagination.size }
    });
    if (response.data.code === 200) {
      restaurantList.value = response.data.data.listData;
      pagination.totalRecords = response.data.data.totalRecords;
    }
  } catch (error) {
    ElMessage.error('获取用户数据失败');
  }
};

// 打开修改餐厅信息的对话框
const openEditDialog = (restaurant: any) => {
  editForm.id = restaurant.id;
  editForm.name = restaurant.name;
  editForm.area = restaurant.area;
  editForm.rating = restaurant.rating;
  editForm.recommendedCount = restaurant.recommendedCount;
  editForm.viewCount = restaurant.viewCount;
  editForm.diningRecommendation = restaurant.diningRecommendation;
  editForm.coverImageUrl = restaurant.coverImageUrl;
  isEditDialogVisible.value = true;
};


// 确认编辑餐厅信息
const confirmEdit = async () => {
  try {
    const rsp = await axios.put('/api/manage/restaurant', {
      id: editForm.id,
      name: editForm.name,
      area: editForm.area,
      rating: editForm.rating,
      recommendedCount: editForm.recommendedCount,
      viewCount: editForm.viewCount,
      diningRecommendation: editForm.diningRecommendation,
      coverImageUrl: editForm.coverImageUrl
    });
    {
    }
    console.log({
      id: editForm.id,
      name: editForm.name,
      area: editForm.area,
      rating: editForm.rating,
      recommendedCount: editForm.recommendedCount,
      viewCount: editForm.viewCount,
      diningRecommendation: editForm.diningRecommendation,
      coverImageUrl: editForm.coverImageUrl
    });

    if (rsp.data.code === 404) {
      console.error('更新失败：', rsp.data);
      ElMessage.error('更新失败');
      return;
    }
    ElMessage.success('用户信息已更新');
    isEditDialogVisible.value = false;
    queryRestaurants(); // 更新用户列表
  } catch (error) {
    ElMessage.error('更新用户信息失败');
  }
};

// 删除餐厅
const deleteRestaurants = async (id: number) => {
  try {
    await ElMessageBox.confirm('确定删除此餐厅？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    await axios.delete(`/api/restaurants/${id}`);
    ElMessage.success('餐厅已删除');
    queryRestaurants(); // 更新餐厅列表
  } catch (error) {
    ElMessage.error('删除餐厅失败');
  }
};

// 处理分页页码变化
const handlePageChange = (newPage: number) => {
  pagination.page = newPage;
  queryRestaurants();
};

// 处理分页大小变化
const handleSizeChange = (newSize: number) => {
  pagination.size = newSize;
  pagination.page = 1; // 重置到第一页
  queryRestaurants();
};

// 页面加载时获取用户数据
onMounted(() => {
  queryRestaurants();
});

</script>

<style scoped>
.dialog-footer {
  text-align: right;
}

.el-table .el-button {
  margin-left: 8px;
}

.el-table .el-button:first-child {
  margin-left: 0;
}

.el-dialog .el-input,
.el-dialog .el-input-number {
  width: 100%;
}
</style>
